﻿<link href="~/Scripts/jquery-easyui-extensions/validatebox/jeasyui.extensions.validatebox.css" rel="stylesheet" />
<script src="~/Scripts/jquery-easyui-extensions/validatebox/jeasyui.extensions.validatebox.js"></script>

<script src="~/Scripts/jquery-easyui-extensions/form/jeasyui.extensions.form.getData.js"></script>

<div class="easyui-panel" data-options="fit:true,border:false" style="padding:20px;">
    <div style="border:#ccc 1px solid;padding:10px;margin-bottom:15px;">
        <form id="fm">
            用户名：<input type="text" id="userName" name="userName" class="easyui-validatebox" value="" />&nbsp;&nbsp;
            <a id="btnSet1" class="easyui-linkbutton" data-options="iconCls:'icon-add'">禁用 用户名 控件</a>
            <a id="btnSet11" class="easyui-linkbutton" data-options="iconCls:'icon-add'">启用 用户名 控件</a>
            <br /><br />

            姓名：<input type="text" id="realName" name="realName" class="easyui-validatebox" value="" />&nbsp;&nbsp;
            <a id="btnSet2" class="easyui-linkbutton" data-options="iconCls:'icon-add'">禁用 姓名 控件</a>
            <a id="btnSet22" class="easyui-linkbutton" data-options="iconCls:'icon-add'">启用 姓名 控件</a>
            <br /><br />

            年龄：<input type="text" id="age" name="age" class="easyui-numberbox" value="" style="width:70px;" />
            <br /><br /><br />
            性别：
            <input name="sex" type="radio" value="male" /> 男 &nbsp;
            <input name="sex" type="radio" value="female" checked="checked" /> 女 &nbsp;
            <br /><br />
            掌握技能：
            <input type="checkbox" id="skill1" name="skill" value="C#" /> <label for="skill1">C#</label> &nbsp;&nbsp;
            <input type="checkbox" id="skill2" name="skill" value="Java" /> <label for="skill2">Java</label> &nbsp;&nbsp;
            <input type="checkbox" id="skill3" name="skill" value="Php" /> <label for="skill3">Php</label> &nbsp;&nbsp;
            <input type="checkbox" id="skill4" name="skill" value="C++" /> <label for="skill4">C++</label> &nbsp;&nbsp;
            <input type="checkbox" id="skill5" name="skill" value="汇编" /> <label for="skill5">汇编</label> &nbsp;&nbsp;
        </form>
    </div>
    <span style="color:red;">请选择序列化规则：</span>
    <br /><br />
    1：<span style="color:red;">onlyEnabled</span> 是否仅包含启用(disabled == false)的 HTML 表单控件 ：
    <br />
    <input type="radio" name="onlyEnabled" value="true" checked="checked" /> 过滤禁用的控件
    <input type="radio" name="onlyEnabled" value="false" /> 包含禁用的控件
    <br /><br />
    2：<span style="color:red;">transcript</span> 当范围内存在重名(name 相同时)的 DOM 元素时，对重复元素的取值规则：
    <br />
    <input type="radio" name="transcript" value="cover" checked="checked" /> cover，只取后面元素 的值，丢弃前面元素的值；
    <input type="radio" name="transcript" value="discard" /> discard，丢弃后面元素的值，只取前面元素的值
    <input type="radio" name="transcript" value="overlay" /> overlay，将所有元素的值进行叠加；
    <br /><br />
    3：<span style="color:red;">overtype</span> 元素叠加方式（当 transcript 的值定义为 "overlay" 时，此属性方有效）：
    <br />
    <input type="radio" name="overtype" value="array" /> array，将所有重复的元素叠加为一个数组；
    <input type="radio" name="overtype" value="append" checked="checked" /> append，将所有的重复元素叠加为一个字符串；
    <br /><br />
    4：<span style="color:red;">separator</span> 元素叠加的分隔符，定义将所有重名元素叠加为一个字符串时用于拼接字符串的分隔符（当 transcript 的值定义为 "overlay" 且 overtype 的值定义为 "append" 时，此属性方有效）：
    <br />
    <input type="text" id="separator" name="separator" value="," />
    <br />
    <br />

    <a id="btnGetData" class="easyui-linkbutton" data-options="iconCls:'icon-save'">获取表单序列化对象（请用浏览器开发者工具（F12）的控制台查看序列化结果）</a>
</div>


<script>
    $(function () {

        $("#btnSet1").click(function () {
            $("#userName").validatebox("disable");
        });
        $("#btnSet11").click(function () {
            $("#userName").validatebox("enable");
        });

        $("#btnSet2").click(function () {
            $("#realName").validatebox("disable");
        });
        $("#btnSet22").click(function () {
            $("#realName").validatebox("enable");
        });


        $("#btnGetData").click(function () {
            var param = {};
            param.onlyEnabled = $.string.toBoolean($("[name='onlyEnabled']:checked").val());
            param.transcript = $("[name='transcript']:checked").val();
            param.overtype = $("[name='overtype']:checked").val();
            param.separator = $("#separator").val();

            var data = $("#fm").form("getData", param);

            console.log(data);
        });

    });
</script>